<!-- <template>
  <div class="content">
    <h1>子组件1</h1>
    值:{{ isRefresh }}
    <br />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
// import { useProjectStoreHook } from "/@/store/modules/project";

// let storeAuth = useProjectStoreHook();

let isRefresh = ref(null);
// watch(
//   () => storeAuth.isRefresh,
//   (newVal, oldVal) => {
//     console.log(newVal, oldVal, "test");
//     isRefresh.value = newVal;
//   }
// );

// console.log(storeAuth);
</script>

<style lang="scss" scoped>
.content {
  padding: 20px;
  background: pink;
}
</style> -->

<template>
  <div class="content-table">
    <div class="content-table--wrap">
      <div class="table-left">
        <div>待选人员:</div>
        <el-row class="table-left--header">
          <el-col :span="18"
            ><el-input
              clearable
              placeholder="输入姓名查询"
              v-model="formInline.nameLike"
            ></el-input
          ></el-col>
          <el-col :span="6"
            ><el-button
              class="table-left--btn"
              type="primary"
              @click="handleSearch"
              >查询</el-button
            ></el-col
          >
        </el-row>
        <el-table
          key="table-left"
          @selection-change="handleSelectionChange"
          ref="multipleTable"
          :data="userList"
          border
          style="width: 400px"
          :height="300"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          :row-key="getRowKeys"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="50"
          />
          <el-table-column
            prop="userName"
            label="姓名"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="companyName"
            label="公司"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <re-pagination
          :layout="`total, prev, pager, next`"
          :total="total"
          v-model:page="formInline.pageNum"
          v-model:limit="formInline.pageSize"
          @pagination="handleSearch"
        />
      </div>
      <div class="table-right">
        <div>已选人员:</div>
        <div class="table-right--header"></div>
        <el-table
          key="table-right"
          :data="multipleSelection"
          border
          style="width: 400px"
          :height="300"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column
            type="index"
            label="序号"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="60"
          ></el-table-column>
          <el-table-column
            prop="companyName"
            label="公司"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
      </div>
    </div>

    <!-- <div style="margin-top: 20px">
      <el-button @click="toggleSelection([userList[1].id, userList[2].id])"
        >Toggle selection status of second and third rows</el-button
      >
      <el-button @click="toggleSelection(false)">Clear selection</el-button>
    </div> -->
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { getUserList } from "/@/api/user";
// import RePagination from "/@/components/RePagination/index.vue";

let userList = ref([]);
let multipleSelection = ref([]);
let total = ref(0);
let formInline = reactive({
  nameLike: "",
  pageNum: 1,
  pageSize: 50
});
const multipleTable = ref<HTMLElement | null>(null) as any;

const getRowKeys = row => {
  return row.id;
};

const handleSearch = () => {
  getUserLists(formInline);
};

const getUserLists = async (obj: object = {}) => {
  try {
    const { code, data } = await getUserList(obj);
    if (code === 200) {
      total.value = data.rows;
      userList.value = data.list.map(item => {
        return {
          id: item.id,
          userName: item.name,
          companyName: item.companyName
        };
      });
    }
  } catch (err) {
    console.log(err);
  } finally {
    multipleTable.value.doLayout();
  }
};

// const toggleSelection = rows => {
//   if (rows) {
//     rows.forEach(row => {
//       multipleTable.value.toggleRowSelection(row);
//     });
//   } else {
//     multipleTable.value.clearSelection();
//   }
// };

const handleSelectionChange = val => {
  multipleSelection.value = val;
};

getUserLists({
  pageNum: 1,
  pageSize: 50,
  nameLike: ""
});
</script>
<style lang="scss" scoped>
.content-table {
  width: 100%;
  height: 100%;
  border: 1px solid #e4e7ed;
  &--wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    .table-left {
      margin-right: 10px;
      &--header {
        padding: 5px 0;
      }
      &--btn {
        float: right;
      }
    }
    .table-right {
      &--header {
        height: 42px;
        padding: 5px 0;
      }
    }
  }
}
.content-table :deep .el-table__fixed-right-patch {
  background: #eef1f6 !important;
}

.content-table :deep .el-table__header {
  background: #eef1f6 !important;
}

.content-table :deep .el-table__header {
  height: 49px;
}
.content-table :deep .el-table__row {
  height: 49px;
}
</style>
